<template>
  <div class="page_user" id="user_messages">
    <div class="warp">
      <div class="container">
        <div class="row justify-content-between">
          <div class="col-12 col-md-3">
            <div class="card_menu">
              <list_menu_user :list_info="list_info"></list_menu_user>
            </div>
          </div>
          <div class="col-12 col-md-9 user_bg">
            <div class="card_default pl-2">
              <div class="page_title">
                <h3>{{ t('myMessagesTitle') }}</h3>
                <div class="page_actions">
                  <el-button size="small" @click="markAllAsRead" :disabled="unreadCount === 0">
                    {{ t('markAllAsRead') }}
                  </el-button>
                  <el-button size="small" type="danger" @click="deleteSelectedMessages" :disabled="selectedMessages.length === 0" icon="el-icon-delete">
                    {{ t('deleteSelected') }}({{ selectedMessages.length }})
                  </el-button>
                  <el-button size="small" type="danger" @click="deleteAllMessages" :disabled="messageList.length === 0" icon="el-icon-delete">
                    {{ t('clearAll') }}
                  </el-button>
                  <el-button size="small" icon="el-icon-refresh" @click="loadMessages">{{ t('refresh') }}</el-button>
                </div>
              </div>

              <!-- 未读消息数量提示 -->
              <div v-if="unreadCount > 0" class="unread_tip">
                <el-alert
                  :title="t('unreadMessages').replace('{count}', unreadCount)"
                  type="info"
                  :closable="false"
                  show-icon>
                </el-alert>
              </div>

              <!-- 消息列表 -->
              <div class="message_list" v-if="messageList.length > 0">
                <div
                  v-for="(item, index) in messageList"
                  :key="item.message_id || index"
                  class="message_item"
                  :class="{ unread: item.is_read === 0 || item.is_read === '0', selected: isSelected(item.message_id) }"
                  @click.stop="toggleSelect(item.message_id)">
                  <div class="message_checkbox">
                    <el-checkbox 
                      :value="isSelected(item.message_id)"
                      @change="toggleSelect(item.message_id)"
                      @click.stop></el-checkbox>
                  </div>
                  <div class="message_icon" @click.stop="viewMessage(item)">
                    <i v-if="item.message_type === 'accommodation'" class="el-icon-house"></i>
                    <i v-else-if="item.message_type === 'notification'" class="el-icon-bell"></i>
                    <i v-else-if="item.message_type === 'seat'" class="el-icon-s-grid"></i>
                    <i v-else class="el-icon-message"></i>
                  </div>
                  <div class="message_content" @click.stop="viewMessage(item)">
                    <div class="message_header">
                      <span class="message_title">{{ getTranslatedTitle(item.title) || t('notification') }}</span>
                      <span class="message_badge" v-if="item.is_read === 0 || item.is_read === '0'">{{ t('unread') }}</span>
                      <span class="message_time">{{ formatTime(item.create_time) }}</span>
                    </div>
                    <div class="message_text">{{ getParsedContent(item) }}</div>
                  </div>
                  <div class="message_actions">
                    <el-button 
                      size="mini" 
                      type="danger" 
                      icon="el-icon-delete" 
                      @click.stop="deleteMessage(item.message_id)"
                      circle></el-button>
                  </div>
                </div>
              </div>

              <!-- 空状态 -->
              <div v-else class="empty_state">
                <i class="el-icon-message" style="font-size: 4rem; color: #ccc;"></i>
                <p>{{ t('noMessages') }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息详情对话框 -->
    <el-dialog
      :title="t('messageDetail')"
      :visible.sync="showDetailDialog"
      width="600px">
      <div class="message_detail" v-if="selectedMessage">
        <div class="detail_section">
          <div class="detail_item">
            <div class="detail_label">{{ t('messageType') }}</div>
            <div class="detail_value">{{ getMessageTypeText(selectedMessage.message_type) }}</div>
          </div>
          <div class="detail_item">
            <div class="detail_label">{{ t('messageTitle') }}</div>
            <div class="detail_value">{{ getTranslatedTitle(selectedMessage.title) }}</div>
          </div>
          <div class="detail_item">
            <div class="detail_label">{{ t('time') }}</div>
            <div class="detail_value">{{ formatTime(selectedMessage.create_time) }}</div>
          </div>
        </div>
        <div class="detail_section content_section">
          <div class="detail_label content_label">{{ t('messageContent') }}</div>
          <div class="detail_content">
            <div class="content_text">{{ parsedMessageContent }}</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deleteSelectedMessage" v-if="selectedMessage">{{ t('delete') }}</el-button>
        <el-button @click="showDetailDialog = false">{{ t('close') }}</el-button>
        <el-button type="primary" @click="markAsReadAndClose" v-if="selectedMessage && (selectedMessage.is_read === 0 || selectedMessage.is_read === '0')">{{ t('markAsReadAndClose') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/page.js";
import mixinI18n from "@/mixins/i18n.js";
import list_menu_user from "@/components/diy/list_menu_user.vue";

export default {
  mixins: [mixin, mixinI18n],
  created() {
    // 覆盖混入的 created，使用自己的逻辑
    // 不在 created 中检查登录，而是在 mounted 中等待 store 恢复
    console.log('messages.vue created: 跳过 check_auth，等待 mounted');
  },
  data() {
    return {
      messageList: [],
      unreadCount: 0,
      showDetailDialog: false,
      selectedMessage: null,
      selectedMessages: [], // 选中的消息ID列表
      _isUserAction: false // 标记是否是用户主动操作
    };
  },
  computed: {
    list_info() {
      return [
        {
          title: this.t('personalInfo'),
          url: "/user/info",
          icon: "house-fill",
          selected: false,
        },
        {
          title: this.t('changePassword'),
          url: "/user/password",
          icon: "person-fill",
          selected: false,
        },
        {
          title: this.t('myRegistrations'),
          url: "/user/participation",
          icon: "file-earmark-text-fill",
          selected: false,
        },
        {
          title: this.t('myMessagesTitle'),
          url: "/user/messages",
          icon: "envelope-fill",
          selected: true,
        },
        {
          title: this.t('favorites'),
          url: "/user/collect",
          icon: "heart-fill",
          selected: false,
        },
      ];
    },
    // 解析后的消息内容（响应式，会根据语言变化自动更新）
    parsedMessageContent() {
      if (!this.selectedMessage || !this.selectedMessage.content) return '';
      return this.parseBilingualContent(this.selectedMessage.content);
    }
  },
  watch: {
    // 监听语言变化，强制更新视图
    currentLanguage: {
      handler() {
        // 当语言切换时，强制重新渲染消息列表和详情
        this.$forceUpdate();
      },
      immediate: false
    },
    // 监听消息列表，确保语言切换时重新解析内容
    messageList: {
      handler() {
        // 当消息列表更新时，确保内容已正确解析
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      },
      deep: true
    }
  },
  methods: {
    /**
     * 获取当前用户ID，如果不存在则尝试恢复登录状态
     * @returns {Promise<number>} 用户ID，如果无法获取则返回 0
     */
    async getCurrentUserId() {
      let userId = this.$store.state.user?.user_id;
      
      // 如果 store 中有用户ID，直接返回
      if (userId && userId !== 0) {
        console.log('getCurrentUserId: 从 store 获取 user_id:', userId);
        return userId;
      }
      
      // 尝试从 token 恢复用户信息
      const token = $.db.get("token");
      if (!token) {
        console.warn('getCurrentUserId: 没有 token');
        return 0;
      }
      
      console.log('getCurrentUserId: 尝试从 token 恢复用户信息...');
      
      try {
        // 使用 Promise 包装 $get_user，确保等待回调完成
        const user = await new Promise((resolve, reject) => {
          const timeout = setTimeout(() => {
            console.warn('getCurrentUserId: 获取用户信息超时');
            reject(new Error('获取用户信息超时'));
          }, 5000);
          
          let callbackCalled = false;
          
          this.$get_user((user) => {
            // 防止回调被调用多次
            if (callbackCalled) {
              console.warn('getCurrentUserId: 回调已被调用，忽略重复调用');
              return;
            }
            callbackCalled = true;
            clearTimeout(timeout);
            
            console.log('getCurrentUserId: $get_user 回调被调用');
            console.log('getCurrentUserId: 回调参数 user:', user);
            console.log('getCurrentUserId: 当前 store.user_id:', this.$store.state.user?.user_id);
            
            // 等待一个 tick，让 store 有时间更新（$get_user 会通过 user_set mutation 更新 store）
            this.$nextTick(() => {
              // 优先从 store 获取（$get_user 成功时会通过 user_set mutation 更新 store）
              const storeUserId = this.$store.state.user?.user_id;
              console.log('getCurrentUserId: nextTick 后 store.user_id:', storeUserId);
              
              // 如果 store 中有有效的 user_id，说明恢复成功
              if (storeUserId && storeUserId !== 0) {
                console.log('getCurrentUserId: 成功从 store 获取到 user_id:', storeUserId);
                resolve({ user_id: storeUserId });
                return;
              }
              
              // 如果 store 中没有 user_id，检查回调参数中的 user
              // 注意：即使 $get_user 失败，也会调用回调，但 user 可能是 undefined 或无效
              if (user && user.user_id && user.user_id !== 0) {
                console.log('getCurrentUserId: 使用回调中的 user_id:', user.user_id);
                // 如果 store 没有更新，可能是 mutation 有问题，但至少我们有 user_id 可以用
                resolve(user);
                return;
              }
              
              // 两者都没有，说明恢复失败
              const token = $.db.get("token");
              if (!token) {
                console.warn('getCurrentUserId: 没有 token');
                reject(new Error('没有 token'));
              } else {
                console.warn('getCurrentUserId: 有 token 但无法获取用户信息，可能 token 已过期或无效');
                reject(new Error('token 无效或已过期'));
              }
            });
          });
        });
        
        // 再次从 store 获取，确保已更新
        userId = this.$store.state.user?.user_id || (user && user.user_id);
        console.log('getCurrentUserId: 最终获取的 user_id:', userId);
        return userId || 0;
      } catch (e) {
        console.warn('getCurrentUserId: 获取用户信息失败:', e);
        // 即使出错，也再检查一次 store（可能已经被其他调用更新了）
        userId = this.$store.state.user?.user_id;
        if (userId && userId !== 0) {
          console.log('getCurrentUserId: 从 store 获取到 user_id:', userId);
          return userId;
        }
        return 0;
      }
    },
    
    async loadMessages() {
      // 获取用户ID（如果需要会自动恢复登录状态）
      const userId = await this.getCurrentUserId();
      console.log('loadMessages: 获取到的 user_id:', userId);
      
      // 最终检查
      if (!userId || userId === 0) {
        console.warn('loadMessages: user_id 无效，提示登录');
        // 只有在 mounted 阶段才不显示提示（避免重复提示）
        // 如果是在用户操作时（如点击按钮）调用，则显示提示
        if (this._isUserAction) {
          this.$message.warning('请先登录');
          this.$router.push('/account/login');
        }
        return;
      }

      try {
        console.log('loadMessages: 开始获取消息列表, user_id:', userId);
        const json = await this.$get(`~/api/user_message/get_my_messages?user_id=${userId}`);
        console.log('loadMessages: API 返回结果:', json);
        if (json.result) {
          this.messageList = json.result.list || [];
          this.unreadCount = json.result.unread_count || 0;
          console.log('loadMessages: 加载成功, 消息数量:', this.messageList.length, ', 未读:', this.unreadCount);
        } else if (json.error) {
          console.error('loadMessages: API 返回错误:', json.error);
          // 如果错误是"请先登录"，可能是 token 已过期
          if (json.error.message && json.error.message.includes('登录')) {
            this.$message.warning('登录已过期，请重新登录');
            this.$router.push('/account/login');
          } else {
            this.$message.error(json.error.message || '获取消息失败');
          }
        }
      } catch (error) {
        console.error('loadMessages: 加载消息失败:', error);
        this.$message.error('加载消息失败，请稍后重试');
      }
    },
    async viewMessage(item) {
      this.selectedMessage = item;
      this.showDetailDialog = true;
      
      // 如果未读，自动标记为已读
      if (item.is_read === 0 || item.is_read === '0') {
        await this.markAsRead(item.message_id, false);
      }
    },
    async markAsRead(messageId, reload = true) {
      if (!messageId) return;

      // 获取用户ID（如果需要会自动恢复登录状态）
      const userId = await this.getCurrentUserId();
      
      // 最终检查
      if (!userId || userId === 0) {
        console.warn('标记已读失败：用户未登录');
        return;
      }

      try {
        console.log('markAsRead: 发送请求 - message_id:', messageId, ', user_id:', userId);
        const json = await this.$post('~/api/user_message/mark_as_read', {
          message_id: messageId,
          user_id: userId
        });

        console.log('markAsRead: 服务器返回:', json);

        if (json.result) {
          console.log('markAsRead: 标记成功');
          if (reload) {
            await this.loadMessages();
          } else {
            // 更新本地数据
            const item = this.messageList.find(m => m.message_id === messageId);
            if (item) {
              item.is_read = 1;
              this.unreadCount = Math.max(0, this.unreadCount - 1);
              console.log('markAsRead: 本地数据已更新, 剩余未读:', this.unreadCount);
            }
          }
        } else if (json.error) {
          console.error('markAsRead: 服务器返回错误:', json.error);
          this.$message.error(json.error.message || '标记已读失败');
        }
      } catch (error) {
        console.error('markAsRead: 请求失败:', error);
        this.$message.error('标记已读失败，请稍后重试');
      }
    },
    async markAsReadAndClose() {
      if (this.selectedMessage) {
        await this.markAsRead(this.selectedMessage.message_id, false);
      }
      this.showDetailDialog = false;
      await this.loadMessages();
    },
    async markAllAsRead() {
      // 标记这是用户操作
      this._isUserAction = true;
      
      // 获取用户ID（如果需要会自动恢复登录状态）
      const userId = await this.getCurrentUserId();
      console.log('markAllAsRead: 获取到的 user_id:', userId);
      
      // 最终检查：如果还是没有 user_id，提示登录
      if (!userId || userId === 0) {
        console.warn('markAllAsRead: user_id 无效');
        this.$message.warning('请先登录');
        this.$router.push('/account/login');
        return;
      }

      try {
        const json = await this.$post('~/api/user_message/mark_all_as_read', {
          user_id: userId
        });

        if (json.result) {
          this.$message.success('已全部标记为已读');
          await this.loadMessages();
        } else if (json.error) {
          this.$message.error(json.error.message || '操作失败');
        }
      } catch (error) {
        console.error('标记全部已读失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    formatTime(time) {
      if (!time) return '';
      if (typeof time === 'number') {
        return new Date(time).toLocaleString('zh-CN');
      }
      if (typeof time === 'string') {
        return time.replace('T', ' ').substring(0, 19);
      }
      return time;
    },
    getMessageTypeText(type) {
      const currentLang = this.currentLanguage || 'zh';
      const typeMap = {
        'accommodation': {
          'zh': '住宿通知',
          'en': 'Accommodation Notice'
        },
        'notification': {
          'zh': '会议通知',
          'en': 'Conference Notice'
        },
        'seat': {
          'zh': '座位安排',
          'en': 'Seat Arrangement'
        }
      };
      const defaultText = {
        'zh': '系统通知',
        'en': 'System Notice'
      };
      
      if (typeMap[type]) {
        return typeMap[type][currentLang] || typeMap[type]['zh'];
      }
      return defaultText[currentLang] || defaultText['zh'];
    },
    // 翻译消息标题
    getTranslatedTitle(title) {
      if (!title) return '';
      
      const currentLang = this.currentLanguage || 'zh';
      
      // 如果是中文，直接返回
      if (currentLang === 'zh') {
        return title;
      }
      
      // 标题翻译映射表
      const titleTranslations = {
        '住宿安排通知': 'Accommodation Arrangement Notice',
        '住宿通知': 'Accommodation Notice',
        '座位安排通知': 'Seat Arrangement Notice',
        '座位安排': 'Seat Arrangement',
        '会议通知': 'Conference Notice',
        '系统通知': 'System Notice'
      };
      
      // 如果找到翻译，返回翻译后的文本
      if (titleTranslations[title]) {
        return titleTranslations[title];
      }
      
      // 如果没有找到翻译，尝试解析双语JSON
      try {
        const jsonObj = JSON.parse(title);
        if (jsonObj && typeof jsonObj === 'object' && jsonObj.en) {
          return jsonObj.en;
        }
      } catch (e) {
        // 不是JSON格式，继续
      }
      
      // 如果都失败了，返回原标题
      return title;
    },
    // 获取解析后的消息内容（用于消息列表，确保响应式）
    getParsedContent(item) {
      if (!item || !item.content) return '';
      return this.parseBilingualContent(item.content);
    },
    // 固定文本的中英文对照表（使用i18n）
    getFixedTextTranslations() {
      const currentLang = this.currentLanguage || 'zh';
      // 如果当前是中文，不需要翻译
      if (currentLang === 'zh') {
        return {};
      }
      // 如果是英文，返回中文到英文的映射
      return {
        '您好': this.t('hello'),
        '您有新的会议通知：': this.t('youHaveNewConferenceNotification'),
        '请及时查看详情。': this.t('pleaseCheckDetailsInTime'),
        '您的住宿安排已确认：': this.t('yourAccommodationArrangementConfirmed'),
        '您的座位安排已确认：': this.t('yourSeatArrangementConfirmed'),
        '会议：': this.t('conference'),
        '住宿地点：': this.t('accommodationLocation'),
        '房间号：': this.t('roomNumber'),
        '座位号：': this.t('seatNumber'),
        '会议地点：': this.t('meetingVenueColon'),
        '请按时入住，如有疑问请联系会务组。': this.t('pleaseCheckInOnTime'),
        '请按座位号就座，感谢配合。': this.t('pleaseTakeSeatAccordingToNumber'),
        '，': ',',
        '。': '.',
        '：': ':'
      };
    },
    // 解析消息内容中的双语JSON字符串和固定文本
    parseBilingualContent(content) {
      if (!content) return '';
      
      // 获取当前语言（从 store 获取，确保响应式）
      // 注意：currentLanguage 是从 mixinI18n 混入的计算属性，它从 this.$store.state.web.language 获取
      const currentLang = this.currentLanguage || 'zh';
      
      // 如果是中文，直接返回原内容
      if (currentLang === 'zh') {
        // 仍然需要解析双语JSON字段（如会议名称、会议地点等）
        return this.parseBilingualJson(content);
      }
      
      // 如果是英文，需要翻译固定文本
      let translatedContent = content;
      
      // 1. 先解析双语JSON字符串（如会议名称、会议地点等）
      translatedContent = this.parseBilingualJson(translatedContent);
      
      // 2. 翻译固定的中文文本（按长度从长到短排序，避免部分匹配问题）
      const translations = this.getFixedTextTranslations();
      const sortedEntries = Object.entries(translations).sort((a, b) => b[0].length - a[0].length);
      
      for (const [zhText, enText] of sortedEntries) {
        // 使用正则表达式进行全局替换，确保替换所有匹配的文本
        const regex = new RegExp(this.escapeRegExp(zhText), 'g');
        translatedContent = translatedContent.replace(regex, enText);
      }
      
      return translatedContent;
    },
    // 解析消息内容中的双语JSON字符串
    parseBilingualJson(content) {
      if (!content) return '';
      
      // 获取当前语言
      const currentLang = this.currentLanguage || 'zh';
      
      // 使用正则表达式匹配所有 {"zh":"...","en":"..."} 格式的JSON字符串
      // 匹配模式：{"zh":"...","en":"..."}，支持转义字符和嵌套引号
      const jsonPattern = /\{"zh":"([^"]*(?:\\.[^"]*)*)","en":"([^"]*(?:\\.[^"]*)*)"\}/g;
      
      // 替换所有匹配的JSON字符串为当前语言对应的文本
      return content.replace(jsonPattern, (match, zhText, enText) => {
        try {
          // 尝试解析完整的JSON对象（更可靠）
          const jsonObj = JSON.parse(match);
          if (jsonObj && typeof jsonObj === 'object') {
            // 使用 $getBilingualText 方法（如果可用）或直接根据语言返回
            if (this.$getBilingualText) {
              return this.$getBilingualText(match);
            }
            // 否则直接根据语言返回
            return currentLang === 'en' ? (jsonObj.en || jsonObj.zh || '') : (jsonObj.zh || jsonObj.en || '');
          }
        } catch (e) {
          // 如果JSON解析失败，使用正则表达式提取的文本
          // 处理转义字符
          const unescapeText = (text) => {
            return text.replace(/\\"/g, '"').replace(/\\\\/g, '\\');
          };
          
          const zh = unescapeText(zhText);
          const en = unescapeText(enText);
          
          // 根据当前语言返回对应文本
          return currentLang === 'en' ? en : zh;
        }
        
        // 如果都失败了，返回原始匹配（不应该发生）
        return match;
      });
    },
    // 转义正则表达式特殊字符
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    },
    // 选择/取消选择消息
    toggleSelect(messageId) {
      const index = this.selectedMessages.indexOf(messageId);
      if (index > -1) {
        this.selectedMessages.splice(index, 1);
      } else {
        this.selectedMessages.push(messageId);
      }
    },
    // 检查消息是否被选中
    isSelected(messageId) {
      return this.selectedMessages.indexOf(messageId) > -1;
    },
    // 删除单条消息
    async deleteMessage(messageId) {
      if (!messageId) return;
      
      this.$confirm('确定要删除这条消息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const userId = await this.getCurrentUserId();
        if (!userId || userId === 0) {
          this.$message.warning('请先登录');
          return;
        }

        try {
          console.log('deleteMessage: 删除消息, message_id:', messageId, ', user_id:', userId);
          const json = await this.$get(`~/api/user_message/del?message_id=${messageId}&user_id=${userId}`);
          console.log('deleteMessage: 服务器返回:', json);

          if (json.result) {
            this.$message.success('删除成功');
            // 如果删除的是未读消息，更新未读数量（在从列表中移除之前检查）
            const deletedMessage = this.messageList.find(m => m.message_id === messageId);
            if (deletedMessage && (deletedMessage.is_read === 0 || deletedMessage.is_read === '0')) {
              this.unreadCount = Math.max(0, this.unreadCount - 1);
            }
            // 从列表中移除
            const index = this.messageList.findIndex(m => m.message_id === messageId);
            if (index > -1) {
              this.messageList.splice(index, 1);
            }
            // 从选中列表中移除
            this.toggleSelect(messageId);
            // 如果删除的是当前查看的消息，关闭对话框
            if (this.selectedMessage && this.selectedMessage.message_id === messageId) {
              this.showDetailDialog = false;
              this.selectedMessage = null;
            }
          } else if (json.error) {
            console.error('deleteMessage: 服务器返回错误:', json.error);
            this.$message.error(json.error.message || '删除失败');
          }
        } catch (error) {
          console.error('deleteMessage: 删除消息失败:', error);
          this.$message.error('删除失败，请稍后重试');
        }
      }).catch(() => {
        // 用户取消删除
      });
    },
    // 删除对话框中选中的消息
    async deleteSelectedMessage() {
      if (this.selectedMessage) {
        await this.deleteMessage(this.selectedMessage.message_id);
      }
    },
    // 删除选中的多条消息
    async deleteSelectedMessages() {
      if (this.selectedMessages.length === 0) {
        this.$message.warning('请选择要删除的消息');
        return;
      }

      this.$confirm(`确定要删除选中的 ${this.selectedMessages.length} 条消息吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const userId = await this.getCurrentUserId();
        if (!userId || userId === 0) {
          this.$message.warning('请先登录');
          return;
        }

        try {
          console.log('deleteSelectedMessages: 批量删除消息, message_ids:', this.selectedMessages, ', user_id:', userId);
          const json = await this.$post('~/api/user_message/batch_delete', {
            message_ids: this.selectedMessages,
            user_id: userId
          });
          console.log('deleteSelectedMessages: 服务器返回:', json);

          if (json.result) {
            this.$message.success(json.result.toString() || '删除成功');
            // 重新加载消息列表
            await this.loadMessages();
            // 清空选中列表
            this.selectedMessages = [];
          } else if (json.error) {
            console.error('deleteSelectedMessages: 服务器返回错误:', json.error);
            this.$message.error(json.error.message || '删除失败');
          }
        } catch (error) {
          console.error('deleteSelectedMessages: 批量删除消息失败:', error);
          this.$message.error('删除失败，请稍后重试');
        }
      }).catch(() => {
        // 用户取消删除
      });
    },
    // 清空全部消息
    async deleteAllMessages() {
      if (this.messageList.length === 0) {
        this.$message.warning('没有可删除的消息');
        return;
      }

      this.$confirm(`确定要删除全部 ${this.messageList.length} 条消息吗？此操作不可恢复！`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const userId = await this.getCurrentUserId();
        if (!userId || userId === 0) {
          this.$message.warning('请先登录');
          return;
        }

        try {
          // 获取所有消息的ID
          const allMessageIds = this.messageList.map(m => m.message_id).filter(id => id != null);
          
          if (allMessageIds.length === 0) {
            this.$message.warning('没有可删除的消息');
            return;
          }

          console.log('deleteAllMessages: 清空全部消息, message_ids:', allMessageIds, ', user_id:', userId);
          const json = await this.$post('~/api/user_message/batch_delete', {
            message_ids: allMessageIds,
            user_id: userId
          });
          console.log('deleteAllMessages: 服务器返回:', json);

          if (json.result) {
            this.$message.success(json.result.toString() || '删除成功');
            // 清空列表
            this.messageList = [];
            this.unreadCount = 0;
            this.selectedMessages = [];
            // 关闭对话框（如果有打开的）
            if (this.showDetailDialog) {
              this.showDetailDialog = false;
              this.selectedMessage = null;
            }
          } else if (json.error) {
            console.error('deleteAllMessages: 服务器返回错误:', json.error);
            this.$message.error(json.error.message || '删除失败');
          }
        } catch (error) {
          console.error('deleteAllMessages: 清空全部消息失败:', error);
          this.$message.error('删除失败，请稍后重试');
        }
      }).catch(() => {
        // 用户取消删除
      });
    }
  },
  async mounted() {
    console.log('messages.vue mounted: 开始加载页面');
    console.log('messages.vue mounted: 当前 store.user_id:', this.$store.state.user?.user_id);
    console.log('messages.vue mounted: 当前 token:', $.db.get("token"));
    
    // 关闭所有之前的消息提示（如果有的话）
    // Element UI 的消息提示可能需要手动关闭
    try {
      if (this.$message && this.$message.closeAll) {
        this.$message.closeAll();
      }
    } catch (e) {
      // 忽略错误
    }
    
    // 不显示任何错误，直接尝试恢复和加载
    // 如果恢复失败，loadMessages 会处理错误显示
    const userId = await this.getCurrentUserId();
    console.log('messages.vue mounted: getCurrentUserId 返回:', userId);
    
    if (userId && userId !== 0) {
      // 如果成功获取到用户ID，加载消息列表
      await this.loadMessages();
    } else {
      // 如果无法获取用户ID，静默跳转到登录页（不显示提示，避免闪烁）
      console.warn('messages.vue mounted: 无法获取用户ID，跳转到登录页');
      // 延迟跳转，避免在页面刚加载时就跳转（可能 store 正在恢复）
      setTimeout(() => {
        const currentUserId = this.$store.state.user?.user_id;
        if (!currentUserId || currentUserId === 0) {
          console.log('messages.vue mounted: 最终检查，仍无 user_id，跳转到登录页');
          this.$router.push('/account/login');
        } else {
          console.log('messages.vue mounted: 延迟检查后，store 已恢复 user_id:', currentUserId);
          // 如果恢复成功，加载消息
          this.loadMessages();
        }
      }, 500);
    }
    
    // 定期刷新未读数量
    this.refreshInterval = setInterval(() => {
      const currentUserId = this.$store.state.user?.user_id;
      if (currentUserId && currentUserId !== 0) {
        this.$get(`~/api/user_message/get_unread_count?user_id=${currentUserId}`).then(json => {
          if (json.result !== undefined) {
            this.unreadCount = Number(json.result) || 0;
          }
        }).catch(err => {
          console.error('获取未读数量失败:', err);
        });
      }
    }, 30000); // 每30秒刷新一次
  },
  beforeDestroy() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  components: {
    list_menu_user,
  },
};
</script>

<style scoped>
.page_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

.page_title h3 {
  margin: 0;
  font-size: 1.5rem;
}

.page_actions {
  display: flex;
  gap: 0.5rem;
}

.unread_tip {
  margin-bottom: 1rem;
}

.message_list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.message_item {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.message_item:hover {
  background: #f5f5f5;
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message_item.unread {
  background: #e6f7ff;
  border-color: #409eff;
}

.message_item.selected {
  background: #e6f2ff;
  border-color: #409eff;
  border-width: 2px;
}

.message_checkbox {
  margin-right: 0.5rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.message_actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.message_icon {
  font-size: 2rem;
  color: #409eff;
  margin-right: 1rem;
  flex-shrink: 0;
}

.message_content {
  flex: 1;
}

.message_header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.message_title {
  font-weight: bold;
  font-size: 1rem;
  flex: 1;
}

.message_badge {
  background: #f56c6c;
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
}

.message_time {
  color: #999;
  font-size: 0.875rem;
}

.message_text {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.empty_state {
  text-align: center;
  padding: 4rem 2rem;
  color: #999;
}

.empty_state p {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.message_detail {
  padding: 0.5rem 0;
}

.detail_section {
  margin-bottom: 1.5rem;
}

.detail_section:last-child {
  margin-bottom: 0;
}

.detail_item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.detail_item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail_label {
  min-width: 120px;
  font-weight: bold;
  color: #333;
  margin-right: 1rem;
  flex-shrink: 0;
}

.content_label {
  margin-bottom: 0.75rem;
  display: block;
}

.detail_value {
  flex: 1;
  color: #666;
  word-break: break-word;
}

.detail_content {
  margin-top: 0.5rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.content_text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  line-height: 1.8;
  color: #333;
  margin: 0;
}

.content_section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e8e8e8;
}
</style>
